<template>
  <el-dialog :visible.sync="dialogVisible" modal style="height: 850px" lock-scroll>
    <div slot="title">
      从数据库导入
    </div>
    <el-container>
      <el-aside width="300px">
        已选数据库:{{selectedDatabase.id}}
        <el-input v-model="databaseQueryKey" placeholder="请输入内容">
        </el-input>
        <el-tree :data="databaseList" :props="defaultProps" @node-click="handleNodeClick" style="margin-top: 20px">
        </el-tree>
      </el-aside>
      <el-main>
        <el-row>
          <el-col :xs="12" :sm="12">
            <el-input v-model="tableQueryKey" placeholder="请输入内容">
            </el-input>
          </el-col>
          <el-col :xs="12" :sm="12">
            <el-button-group>
              <el-button>确定</el-button>
              <el-button>确定</el-button>
            </el-button-group>

          </el-col>
        </el-row>
        <el-table :data="tableList" :fit="true" stripe border height="500px"
                  @selection-change="handleSelectionChange">
          >
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="table_name" label="表名"/>
          <el-table-column prop="table_comment" label="说明"/>
        </el-table>
      </el-main>
    </el-container>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button @click="importTable()">导入</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import linkApi from '@/api/database/link'
  import tableApi from '@/api/database/table'
  import {Notification} from 'element-ui';

  export default {
    name: "inputTable",
    data() {
      return {
        selectedDatabase: {},
        databaseQueryKey: '',
        tableQueryKey: '',
        databaseList: [],
        dialogVisible: false,
        tableList: [],
        selectTable: [],
        defaultProps: {
          label: 'linkName'
        }
      }
    },
    created() {
      this.getDatabaseList();
    },
    methods: {
      handleSelectionChange(val) {
        this.selectTable = val;
      },
      importTable() {
        const data = {
          databaseId: this.selectedDatabase.id,
          tables: []
        };
        for (let i = 0; i < this.selectTable.length; i++) {
          data.tables.push(this.selectTable[i].table_name);
        }
        tableApi.importFromJdbc(data).then(res => {
          if (res.success) {
            Notification({
              title: '信息',
              message: '导入成功!',
              type: 'success',
              duration: 2000
            });
            this.$parent.handleNodeClick(this.selectedDatabase);
          } else {
            Notification({
              title: '信息',
              message: '导入失败!',
              type: 'error',
              duration: 2000
            });
          }
        })
      },
      getDatabaseList() {
        linkApi.findAll().then(res => {
          console.log(res);
          this.databaseList = res.data;
          if (this.databaseList.length > 0) {
            this.handleNodeClick(this.databaseList[0]);
          }
        })
      },
      handleNodeClick(data) {
        this.selectedDatabase = data;
        tableApi.findAllJdbcTableByDatabaseId(data.id).then(res => {
          console.log(res);
          this.tableList = res.data;
        })
      },
      openDialog() {
        this.dialogVisible = true;
      }
    }
  }
</script>

<style scoped>

</style>
